<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>店铺列表</title>
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>

<table id="store" lay-filter="test"></table>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script th:src="@{/layui/layui.js}"></script>

<script th:inline="none">
  layui.table.render({
    elem: '#store'
    ,url: '/store/storeList.do' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'storeId', title: '店铺ID', width:120, sort: true}
      ,{field: 'storeName', title: '店铺名称', width:120}
      ,{field: 'storeStatus', title: '店铺状态', width: 120, sort: true}
      ,{field: 'storeManager', title: '店长', width: 120, sort: true}
      ,{field: 'storeTel', title: '联系电话', width: 120}
      ,{field: 'storeAddress', title: '店铺地址', width:200}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]]
  });

  var $ = layui.jquery;

  layui.table.on('tool(test)', function(obj){
    var data = obj.data;
    //console.log(obj)
    if(obj.event === 'del'){
      layer.confirm('确定删除该行?', function(index){
        $.ajax({
          method:'post',
          url:'/store/delete.do?id='+data.storeId,
          dataType:'json',
          success:function (rs) {
            if (rs.code==200) {
              layui.layer.msg("删除成功");
              layui.table.reload('store', {
                page: {
                  page: 1 //重新从第 1 页开始
                }
              });
            }else {
              layui.layer.msg("删除失败");
            }
          }
        })
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
      layer.prompt({
        formType: 2
        ,value: data.email
      }, function(value, index){
        obj.update({
          email: value
        });
        layer.close(index);
      });
    }
  });
</script>
</body>
</html>